import { 
    Component,
    UniformInjector,
 } from 'kokomi.js';
import type { Base } from 'kokomi.js';
import { 
    SphereGeometry,
    ShaderMaterial,
    Mesh,
} from 'three';
import Debug from '../Debug';
import testObjectVertexShader from "../shaders/testObject/vert.glsl";
import testObjectFragmentShader from "../shaders/testObject/frag.glsl";
import type Experience from "../Experience";

export default class TestObject extends Component{
    declare base: Experience;

    public materail: ShaderMaterial;
    public mesh: Mesh;
    public uj: UniformInjector;

    constructor(base: Base){
        super(base);

        const params = {
            uDistort: {
                value: 1,
            },
        };

        const geometry = new SphereGeometry(2, 64, 64);

        const material = new ShaderMaterial({
            vertexShader: testObjectVertexShader,
            fragmentShader: testObjectFragmentShader,
        });
        this.materail = material;

        const mesh = new Mesh(geometry, material);
        this.mesh = mesh;

        const uj = new UniformInjector(this.base);
        this.uj = uj;
        material.uniforms = {
            ...material.uniforms,
            ...uj.shadertoyUniforms,
            ...params,
        };

        const debug = this.base.debug as any as Debug;
        if(debug?.active){
            const debugFolder = debug.ui?.addFolder('testObject');
            debugFolder?.add(params.uDistort, 'value')
                .min(0)
                .max(2)
                .step(0.01)
                .name('distort');
        }

    }

    addExisting(): void {
        this.container.add(this.mesh);
    }

    update(){
        this.uj.injectShadertoyUniforms(this.materail.uniforms);
    }
}